import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Dimensions } from 'react-native';
import { Flex, Icon, Toast } from 'antd-mobile-rn';
import moment from 'moment';
import constants from '../utils/constants';

const window = Dimensions.get("screen");


/**
 * 获取日期列表
 * @param {*} date 
 */
const getDateList = (date) => {
    const list = [];
    const lastDate = moment(date).endOf("month");
    const dateCount = lastDate.date();
    for (let i = (dateCount - 1); i >= 0; i--) {
        // console.log("s::", i)
        const d = moment(lastDate.toDate()).add(i * -1, "d");
        list.push(d.toDate());
    }
    return list;
}



const getCalendar = (date) => {
    const calendar = {
        date: date,
        data: [],
        dateList: []
    }
    const dataList = getDateList(date);

    const firstDate = dataList[0];

    calendar.firstDate = firstDate;

    const w = moment(firstDate).get("day");

    for (let i = 0; i < w; i++) {
        calendar.data.push(moment(firstDate).add((w - i) * -1, "d").toDate());
    }

    dataList.forEach((value, index) => {
        calendar.data.push(value);
    });
    const lastDate = dataList[dataList.length - 1];

    calendar.lastDate = lastDate;

    const count = 42 - calendar.data.length;

    for (let i = 1; i <= count; i++) {
        calendar.data.push(moment(lastDate).add(i, "d").toDate());
    }


    //    Toast.info(w);


    // for (let i = 1; i <= dateCount; i++) {

    //     let itemData = [];
    //     for (let j = 1; j <= 7; j++) {
    //         if (j <= (w - 1) && i == 1) {
    //             itemData.push(null);
    //             continue;
    //         }
    //         if (index < dataList.length) {
    //             itemData.push(dataList[index]);
    //             index++;
    //         } else {
    //             itemData.push(null);
    //         }

    //     }
    //     calendar.data.push(itemData);
    // }



    let index = 0;
    const arr = [];
    let item = [];
    for (let i = 0; i < calendar.data.length; i++) {

        index++;


        item.push(calendar.data[i]);

        if (index >= 7) {
            index = 0;
            arr.push(item.map(d => d));
            item = [];



        }


    }

    calendar.dateList = arr;

    console.log("calendar::", calendar);

    return calendar;
}

/**
 * 日历
 */
export default class ReportCalendar extends Component {


    state = {
        calendar: getCalendar(new Date())
    }

    constructor(props) {
        super(props);

    }
    handleChangeCalendar = (i) => {
        const date = moment(this.state.calendar.date).add(i, 'month').toDate();
        this.setState({
            calendar: getCalendar(date)
        });

        if (this.props.onCalendarChange) {
            this.props.onCalendarChange(date);
        }


    }


    componentDidMount() {


    }

    render() {

        const calendarData = this.state.calendar;

        const renderItemStyle = this.props.itemStyle ? this.props.itemStyle : () => { return {} };

        const sw = (window.width / 7) * 0.7;



        return (

            <View>
                <Flex style={{ marginBottom: 15 }}>
                    <Flex.Item>
                        <TouchableOpacity onPress={() => { this.handleChangeCalendar(-1) }}>
                            <Text style={{ textAlign: "left", marginLeft: 10 }}>
                                <Icon type={"left"} size={16}></Icon>
                            </Text>
                        </TouchableOpacity>
                    </Flex.Item>
                    <Flex.Item style={{ alignItems: "center" }}><Text style={{ fontSize: 16, color: "#000", fontWeight: "bold" }}>{moment(calendarData.date).format("YYYY年MM月")}</Text></Flex.Item>
                    <Flex.Item>
                        <TouchableOpacity onPress={() => { this.handleChangeCalendar(1) }}>
                            <Text style={{ textAlign: "right", marginRight: 10 }} >
                                <Icon type={"right"} size={16} ></Icon>
                            </Text>
                        </TouchableOpacity>

                    </Flex.Item>
                </Flex>
                <Flex style={{ marginBottom: 10 }}>
                    {
                        ['日', '一', '二', '三', '四', '五', '六'].map((d, i) => {
                            return (
                                <Flex.Item key={i} style={{ alignItems: "center" }}>
                                    <Text>{d}</Text>
                                </Flex.Item>
                            )
                        })
                    }
                </Flex>

                {
                    calendarData.dateList.map((item, i) => {
                        return (
                            <Flex key={i}>
                                {
                                    item.map((d, j) => {

                                        const { firstDate, lastDate } = calendarData;

                                        const colorStyle = (d.getTime() < firstDate.getTime() || d.getTime() > lastDate.getTime()) ? {
                                            color: "#ccc"
                                        } : {}

                                        return (
                                            <Flex.Item
                                                key={j}
                                                onPress={() => {
                                                    if (d && this.props.onItemClick) {
                                                        this.setState({
                                                            calendar: getCalendar(d)
                                                        })

                                                        this.props.onItemClick(d);
                                                    }
                                                }}
                                                style={{
                                                    height: sw,
                                                    alignItems: "center",
                                                    borderWidth: 0,
                                                    justifyContent: 'center',
                                                    textAlignVertical: 'center',


                                                }}>
                                                <View style={[{
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    width: sw,
                                                    height: sw,
                                                    borderRadius: sw,
                                                    textAlignVertical: 'center',
                                                    backgroundColor: "#fff",
                                                    position: "relative"

                                                },
                                                renderItemStyle(d)
                                                ]}
                                                >
                                                    <View style={{ alignItems: "center", }}>
                                                        <Text style={[{ fontSize: 14, marginTop: 2 }, colorStyle, renderItemStyle(d)]}>{moment(d).format("D")}</Text>

                                                    </View>

                                                    <View style={{ position: "absolute", width: "100%", alignItems: "center", bottom: -8 }}>
                                                        {this.props.hasTask ? this.props.hasTask(d) : undefined}
                                                    </View>

                                                </View>

                                            </Flex.Item>
                                        )
                                    })
                                }
                            </Flex>
                        )
                    })
                }

            </View>

        )
    }

}